<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入全局导航栏css样式 -->
    <link rel="stylesheet" type="text/css" href="../css/overall_style.css">
    <link rel="stylesheet" type="text/css" href="../css/pay/pay_wait.css">
    <link rel="shortcut icon" href="../imgs/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"
          media="all">
    <script src="../js/conf.js"></script>

</head>
<body>
<!-- 此处为引入导航 -->
<script src="../plugins/jquery.min.js"></script>
<div id="nav"></div>

<!-- 此处为进度条 -->
<div class="progress_bar_box">
    <div class="step">
        <span class="step-num">1</span>
        <div class="bar first_bar"></div>
        <span class="step-text">选择影片场次</span>
    </div>
    <div class="step">
        <span class="step-num">2</span>
        <div class="bar secont_bar"></div>
        <span class="step-text">选择座位</span>
    </div>
    <div class="step">
        <span class="step-num">3</span>
        <div class="bar third_bar"></div>
        <span class="step-text">15分钟内付款</span>
    </div>
    <div class="step">
        <span class="step-num">4</span>
        <div class="bar last_bar"></div>
        <span class="step-text">选择影片场次</span>
    </div>
</div>
<!-- 此处为支付倒计时 -->
<div class="layui-row endTime">
    <div class="layui-col-md1"><img id="img2" src="../imgs/icon/endTime.png"></div>
    <div class="layui-col-md9 layui-col-md-offset1 div1">
        <div class="layui-row div2"><p>请在<span class="minute"></span>分钟<span class="second"></span>秒内完成支付
        </p></div>
        <div class="layui-row div3"><span>超时订单会自动取消,如遇支付问题,请致电票无忧客服: 16639148377</span></div>
    </div>
</div>
<!-- 此处为提醒信息 -->
<div id="msg1"><h6><img id="img3" src="../imgs/icon/danger.png">请仔细核对场次信息,出票后将<span
        id="spanOne">无法退票和改签</span></h6></div>
<!-- 此处为电影信息表格 -->
<div id="filmMsg">
    <table>
        <tr id="tr1">
            <td>影片</td>
            <td>时间</td>
            <td>影院</td>
            <td>座位</td>
        </tr>
        <tbody id="tbody">

        </tbody>

    </table>
</div>
<!-- 支付钱款数 -->
<div id="pay"><span id="span2">实际支付:</span><img id=img1 src="../imgs/icon/money.png"><span id="span3"></span>
</div>
<!-- 确认支付按钮 -->
<button type="button" id="btn" class="layui-btn layui-btn-danger layui-btn-radius" onclick="toPay()">确认支付</button>
<script src="../plugins/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<!-- 进度条JS -->
<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        //触发事件
        var active = {
            setPercent: function () {
                //设置50%进度
                element.progress('demo', '50%')
            }
            , loading: function (othis) {
                var DISABLED = 'layui-btn-disabled';
                if (othis.hasClass(DISABLED)) return;

                //模拟loading
                var n = 0, timer = setInterval(function () {
                    n = n + Math.random() * 10 | 0;
                    if (n > 100) {
                        n = 100;
                        clearInterval(timer);
                        othis.removeClass(DISABLED);
                    }
                    element.progress('demo', n + '%');
                }, 300 + Math.random() * 1000);

                othis.addClass(DISABLED);
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = $(this).data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>

<!-- 导航栏JS -->
<script>
    $(function () {
        $("#nav").load('../html/nav.html');
    })
</script>
<script src="../plugins/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="../js/overall_style.js"></script>
<script src="../js/pay_wait/pay_wait.js"></script>
</body>
</html>